import {SimpleModel} from "../framework/model/SimpleModel.ts";
import {CSS3DObject} from "three/examples/jsm/renderers/CSS3DRenderer";


const css = `border: solid #0e93b7 2px;
  position: absolute;
  background: #62cbe70d;
  color: white;
  padding: 8px 8px;
  border-radius: 4px;
  font-size: 16px;
  white-space: nowrap;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;`

const initDialog = (): HTMLElement => {
    let div = document.createElement('div')
    div.style.cssText = css
    return div
}

/**
 * 信息标签,单独使用
 */
export class Information extends SimpleModel {

    label: CSS3DObject
    constructor() {
        super("Information")
        let scale = 0.03
        this.scene?.scale.set(scale, scale,1)
    }

    setContent(content: string) {
        let div = initDialog()
        div.style.width = '100px'
        div.style.height = '50px'
        div.innerText=content
        if (this.label != null) {
            this.scene?.remove(this.label)
        }
        this.label = new CSS3DObject(div)
        this.scene?.add(this.label)

    }

}
